﻿@{
    var defaultGridPageSize = EngineContext.Current.Resolve<Giant.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
    var gridPageSizes = EngineContext.Current.Resolve<Giant.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;

    //page title
    ViewBag.Title = T("Admin.ContentManagement.Blog.Comments").Text;
    //active menu item (system name)
    Html.SetActiveMenuItemSystemName("Blog comments");

    int? filterByBlogPostId = ViewBag.FilterByBlogPostId;
}

@Html.AntiForgeryToken()
<div class="content-header clearfix">
    <h1 class="pull-left">
        @T("Admin.ContentManagement.Blog.Comments")
    </h1>
    <div class="pull-right">
        <button type="button" id="delete-selected" class="btn bg-red">
            <i class="fa fa-trash-o"></i>
            @T("Admin.ContentManagement.Blog.Comments.DeleteSelected")
        </button>
    </div>
</div>

<div class="content">
    <div class="form-horizontal">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="comments-grid"></div>

                    @{
                        string readUrl = "";
                        if (filterByBlogPostId.HasValue)
                        {
                            readUrl = Url.Action("Comments", "Blog", new {filterByBlogPostId = filterByBlogPostId.Value});
                        }
                        else
                        {
                            readUrl = Url.Action("Comments", "Blog");
                        }
                    }
                    <script>
                        $(document).ready(function() {
                            $("#comments-grid").kendoGrid({
                                dataSource: {
                                    type: "json",
                                    transport: {
                                        read: {
                                            url: "@readUrl",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        },
                                        destroy: {
                                            url: "@Html.Raw(Url.Action("CommentDelete", "Blog"))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        }
                                    },
                                    schema: {
                                        data: "Data",
                                        total: "Total",
                                        errors: "Errors",
                                        model: {
                                            id: "Id",
                                            fields: {
                                                //do not implicitly specify all fields
                                                //we do it only for fields which implicitly require it
                                                //otherwise, they'll be formatted wrong way
                                                CreatedOn: { type: "date" }
                                            }
                                        }
                                    },
                                    error: function(e) {
                                        display_kendoui_grid_error(e);
                                        // Cancel the changes
                                        this.cancelChanges();
                                    },
                                    pageSize: @(defaultGridPageSize),
                                    serverPaging: true,
                                    serverFiltering: true,
                                    serverSorting: true
                                },
                                pageable: {
                                    refresh: true,
                                    pageSizes: [@(gridPageSizes)]
                                },
                                editable: {
                                    confirmation: "@T("Admin.Common.DeleteConfirmation")",
                                    mode: "inline"
                                },
                                scrollable: false,
                                dataBound: onDataBound,
                                columns: [
                                    {
                                        field: "Id",
                                        headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
                                        headerAttributes: { style: "text-align:center" },
                                        attributes: { style: "text-align:center" },
                                        template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
                                        width: 50
                                    }, {
                                        field: "Id",
                                        title: "ID",
                                        width: 50
                                    }, {
                                        field: "BlogPostTitle",
                                        title: "@T("Admin.ContentManagement.Blog.Comments.Fields.BlogPost")",
                                        width: 200,
                                        template: '<a href="@Url.Content("~/Admin/Blog/Edit/")#=BlogPostId#">#:BlogPostTitle#</a>'
                                    }, {
                                        field: "UserId",
                                        title: "@T("Admin.ContentManagement.Blog.Comments.Fields.User")",
                                        width: 200,
                                        template: '<a href="@Url.Content("~/Admin/User/Edit/")#=UserId#">#:UserInfo#</a>'
                                    }, {
                                        field: "Comment",
                                        title: "@T("Admin.ContentManagement.Blog.Comments.Fields.Comment")",
                                        encoded: false
                                    }, {
                                        field: "CreatedOn",
                                        title: "@T("Admin.ContentManagement.Blog.Comments.Fields.CreatedOn")",
                                        width: 200,
                                        type: "date",
                                        format: "{0:G}"
                                    }, {
                                        command: { name: "destroy", text: "@T("Admin.Common.Delete")" },
                                        title: "@T("Admin.Common.Delete")",
                                        width: 100
                                    }
                                ]
                            });
                        });
                    </script>

                    <script type="text/javascript">
                        var selectedIds = [];

                        $(document).ready(function() {
                            //"delete selected" button
                            $('#delete-selected').click(function(e) {
                                e.preventDefault();

                                var postData = {
                                    selectedIds: selectedIds
                                };
                                addAntiForgeryToken(postData);

                                $.ajax({
                                    cache: false,
                                    type: "POST",
                                    url: "@(Url.Action("DeleteSelectedComments", "Blog"))",
                                    data: postData,
                                    complete: function(data) {
                                        //reload grid
                                        var grid = $('#comments-grid').data('kendoGrid');
                                        grid.dataSource.read();
                                    },
                                    error: function(xhr, ajaxOptions, thrownError) {
                                        alert(thrownError);
                                    },
                                    traditional: true
                                });
                                return false;
                            });
                            
                            $('#mastercheckbox').click(function() {
                                $('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
                            });

                            //wire up checkboxes.
                            $('#comments-grid').on('change', 'input[type=checkbox][id!=mastercheckbox]', function(e) {
                                var $check = $(this);
                                if ($check.is(":checked") == true) {
                                    var checked = jQuery.inArray($check.val(), selectedIds);
                                    if (checked == -1) {
                                        //add id to selectedIds.
                                        selectedIds.push($check.val());
                                    }
                                } else {
                                    var checked = jQuery.inArray($check.val(), selectedIds);
                                    if (checked > -1) {
                                        //remove id from selectedIds.
                                        selectedIds = $.grep(selectedIds, function(item, index) {
                                            return item != $check.val();
                                        });
                                    }
                                }
                                updateMasterCheckbox();
                            });
                        });

                        function onDataBound(e) {

                            $('#comments-grid input[type=checkbox][id!=mastercheckbox]').each(function() {
                                var currentId = $(this).val();
                                var checked = jQuery.inArray(currentId, selectedIds);
                                //set checked based on if current checkbox's value is in selectedIds.
                                $(this).attr('checked', checked > -1);
                            });

                            updateMasterCheckbox();
                        }

                        function updateMasterCheckbox() {
                            var numChkBoxes = $('#comments-grid input[type=checkbox][id!=mastercheckbox]').length;
                            var numChkBoxesChecked = $('#comments-grid input[type=checkbox][id!=mastercheckbox]:checked').length;
                            $('#mastercheckbox').attr('checked', numChkBoxes == numChkBoxesChecked && numChkBoxes > 0);
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>